<template>
  <div class="layout-design-canvas">
    <img class="background" :src="backgroundImage"/>
<!--    <DraggableContainer parent>-->
      <VueDraggableResizable
        v-for="(item,index) in elementRefs" :key="index"
        v-bind="optionMap[item.type]"
        :init-w="item.boxObj.w"
        :init-h="item.boxObj.h"
        parent
        v-model:x="item.boxObj.x"
        v-model:y="item.boxObj.y"
        v-model:w="item.boxObj.w"
        v-model:h="item.boxObj.h"
        :style="getStyleStr(item)"
        @activated="changeActive(index)"
      >

        <ElementText v-if="item.type==='text'" :key="index" :element="item"/>
        <ElementImage v-if="item.type==='image'" :key="index" :element="item"/>
        <ElementInteractiveText v-if="item.type==='interactiveText'" :key="index" :element="item"/>
      </VueDraggableResizable>
<!--    </DraggableContainer>-->

  </div>
</template>

<script setup lang="ts">
import VueDraggableResizable, {DraggableContainer} from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

import {useVModel} from "@vueuse/core";
import ElementImage from "@/views/yz/screen/element/ElementImage.vue";
import ElementText from "@/views/yz/screen/element/ElementText.vue";
import ElementInteractiveText from "@/views/yz/screen/element/ElementInteractiveText.vue";

const props = defineProps({
  elements: {
    type: Array,
    default: () => [{
      boxObj: {}
    }]
  },
  screen: {
    type: Object,
    default: () => ({})
  },
  // 当前激活元素数组序号
  activeIndex: {
    type: Number,
    default: () => 0
  }
})

const emits = defineEmits(['update:activeIndex'])

// 更新当前激活的元素
const changeActive = (index) => {
  emits('update:activeIndex', index)
}
const elementRefs = useVModel(props, 'elements', emits)
const settingParam = computed(()=>{
    try {
        if(props.screen.settingParam){
            return JSON.parse(props.screen.settingParam)
        }
    } catch (e) {
        console.log(e)
    }
    return {}
})
// 背景图片
const backgroundImage = computed(() => {
  return settingParam.value['background']
})
// 不同类型不同限制
const optionMap = {
  text: {
    lockAspectRatio: false,
    draggable: true,
    resizable: true
  },
  image: {
    lockAspectRatio: true,
    draggable: true,
    resizable: true
  }
}
// 获取层级
const getStyleStr = (element)=>{
  let styleStr = ''
  styleStr += `z-index: ${element.layer};`
  styleStr += element.style
  return styleStr;
}
</script>
<style lang="scss" scoped>
.layout-design-canvas {
  position: relative;
  width: 1080px;
  height: 1920px;
  background: repeating-linear-gradient(to right, rgb(243, 243, 243) 0 1px, transparent 1px 24px, rgb(243, 243, 243) 24px 25px),
  repeating-linear-gradient(rgb(243, 243, 243) 0 1px, transparent 1px 24px, rgb(243, 243, 243) 24px 25px);
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
</style>
